<template>
	<div class="live">
		<div class="live_d">
			<div class="header" v-if="particulars.status == 'play'">
				<video-player class="vjs-custom-skin" :options="playerOptions"></video-player>
	    	</video>
			</div>
			<!--<div v-if="particulars.status == 'history'">
				<video :src="historys" width="100%" height="100%" autoplay="autoplay" controls='controls'></video>
			</div>-->
			<div class="zy_media" v-if="particulars.status == 'history'">
	    		<video :src="historys" type="video/mp4" width="100%" height="100%" autoplay="autoplay" controls='controls'>
	   			</video>
	   		</div>
			<div v-if="particulars.status == 'pre'">
				<img :src="playImage" class="yimg">
			</div>
		</div>
		<div class="details">
			<h4>{{particulars.title}}</h4>
			<div class="details-d">
				<div class="zhi" v-if="particulars.status == 'play'">直播中</div>
				<div class="zhi" v-if="particulars.status == 'pre'">预热中</div>
				<div class="zhi" v-if="particulars.status == 'history'">精彩回放</div>
				<div>
					<span v-if="particulars.totalChat != '0' "><img src="../assets/images2/can.png">{{particulars.totalChat}}</span>
					<span v-if="particulars.totalLike != '0' "><img src="../assets/images2/dian.png">{{particulars.totalLike}}</span>
				</div>
			</div>
		</div>
			
			<div class="list">
			<div class="on list-u">聊天</div>
			<div class="list-u">详情</div>
		</div>
		<div class="yin">
		<div class="content">
			
			<div class="chat" id="chat">
				<div v-for="item in list">
					<img :src="item.userHeadImg">
					<span>{{item.content}}</span>
				</div>
			</div>
			<div class="speak">
					<img src='../assets/images2/biao.png' class="biao">
				<input type="text" placeholder="我来说两句" class="talk" id="talk" ref="text"/>
					<img src='../assets/images2/fa.png' class="send" @click="send">
			</div>
		</div>
		<div class="content" style="display: none;">
			<div class="message">
				
				<div>
					<span>直播主播：</span>
					<span>{{particulars.userName}}</span>
				</div>
				<div>
					<span>直播时间：</span>
					<span>{{particulars.startTime}}</span>
				</div>
				<div>
					<span style="float: left;">活动介绍：</span>
					<span style="width: 5rem;display: block;float: left;">{{particulars.detail}}</span>
				</div>
				
			</div>
		</div>
			
		</div>
	</div>
</template>

<script>
import { BaseUrl } from '../Baseurl/common.js';
import { videoPlayer } from 'vue-video-player';
import { Toast } from 'mint-ui';
import $ from "jquery";
import videojs from 'video.js'
window.videojs = videojs
require('videojs-contrib-hls/dist/videojs-contrib-hls.js')

export default {
	data() {
		return {
			particulars: '',
			list: '',
			id:'',
			palys:'',
			historys:'',
			playImage:'',
			nameimg:'',
			token:'',
			AppId:'',
			playerOptions: {
				height: '200px',
				sources: [{
					withCredentials: false,
					type: "application/x-mpegURL",
					src: ""
				}]
			}
		}
	},
	created() {
		this.url =  window.location.href;
		this.id = this.$route.query.liveId;
		this.token = this.$route.query.token;
		this.appId = this.$route.query.appId;
		var Url = BaseUrl + "live/listChat?historyId=" + this.id;
		this.$http.get(Url).then(res => {
			this.list = res.data.data.list;

		})
		

	},
	methods:{
		send:function(){
			var text = this.$refs.text.value;
			if(text !=''){
//				var token =  localStorage.getItem("token")
//				if(token == ""){
//					this.$router.push({ path: '/enter?url=1'})
//					localStorage.setItem('url', this.url);
//				}
				var Url = BaseUrl + "live/addChat?appId=" +this.appId + '&token=' + this.token + '&content=' + text + '&historyId=' + this.id;
				this.$http.get(Url).then(res => {
					console.log(res.code)
					console.log(res.msg)
					if(res.code == '10000'){
						this.nameimg = res.data.data;
						var a = ($(".talk").val())
						if(a != '') {
							var str = ''
							str += '<div style="margin:0.5rem 0.3rem;overflow:hidden">' + '<img src="'+this.nameimg+'" style="width:0.8rem;height:0.8rem;float:left;border-radius:50%">' + '<span style="float:left;background:#F3F4F6;color:#333740;font-size:0.24rem;border-radius:0.2rem;padding:0.24rem;word-wrap:break-word;width:4rem;margin-left:0.15rem;">' + a + '</div>' + '</span>'
							$('#chat').prepend(str)
							$(".talk").val('')
						}
					}else{
						Toast({
							message: res.msg,
							position: 'middle',
							duration: 3000
						});
					}
					
					
				})
			}
						
			
		}
	},
	mounted() {
		$(document).ready(function() {
			//视屏
		   	document.body.style.overflow='hidden';
		    zymedia('video',{autoplay: true});
		})
		
		var _this =this;
		var url = BaseUrl + "live/detail?historyId=" + this.id;
		this.$http.get(url).then(res => {
			if(res.data.code == "10000") {
				
				this.particulars = res.data.data;
//				console.log(this.particulars)
				this.palys = this.particulars.playLiveHls;
				this.historys = this.particulars.playHistoryUrl;
				this.playImage = this.particulars.playImage;
				this.playerOptions.sources[0].src = this.palys;
				
				$(document).ready(function() {

			
					$('.content:eq(0)').show()
					$('.list div').click(function() {
						var index = $(this).index()
						$(this).addClass('on').siblings().removeClass('on')
						$('.content').hide().eq(index).show()
					})
		
				})
				
				
				
			}

		})
		
		
	}

}
</script>

<style scoped="scoped">
	.live{
		width: 100%;
		background: #F3F4F6;
	}
	.header{
		width: 100%;
		height: 4rem;
	}
	.live_d{
		width: 100%;
		height: 4.2rem;
		background:rgba(0,0,0,0.5) ;
	}
	.zy_media{
		height: 100%;
		background: rgba(0,0,0,0.5);
	}
	.yimg{
		width: 100%;
		height: 4rem;
		display: block;
	}
	.details{
		width: 100%;
		height: 2rem;
		padding:0.3rem 0.3rem 0 0.3rem ;
		background: #FFFFFF;
		border-bottom: 1px solid #E0E2E7;
	}
	.h4{
		color: #333740;
		font-size: 0.36rem;
		display: block;
		margin-bottom: 0.25rem;
	}
	.details-d{
		display: flex;
		justify-content: space-between;
	}
	.zhi{
		background: #FB730A;
		font-size: 0.24rem;
		color: #FFFFFF;
		font-family: "PingFangSC-Medium";
		padding: 0.03rem 0.14rem;
		border-radius: 0.05rem;
	}
	.details-d img{
		width: 0.24rem;
		height: 0.21rem;
		margin-right: 0.1rem;
	}
	.details-d span{
		color: #FB730A ;
		font-size: 0.26rem;
		margin: 0 0.43rem;
	}
	.list{
		width: 100%;
		height: 0.9rem;
		border-bottom: 1px solid #E0E2E7;
		padding: 0 0.83rem 0 0.95rem;
		display: flex;
		justify-content:space-between;
		background: #FFFFFF;
	}
	.list div{
		width: 1.28rem;
		height: 0.9rem;
		line-height: 0.9rem;
		text-align: center;
		font-size: 0.28rem;
		color: #9DA4B3;
		font-family: "PingFangSC-Medium";
	}
	.on{
		border-bottom: 6px solid #FB730A ;
		color: #333740!important;
	}
	.yin{
		width: 100%;
		height: 6.5rem;
		overflow: hidden;
	}
	.chat{
		width: 100%;
		height: 5.5rem;
		overflow-y: auto;
		background: #F3F4F6;
	}
	.chat div{
		margin:0.5rem 0.3rem;overflow:hidden
	}
	.chat img{
		width:0.8rem;height:0.8rem;float:left;border-radius:50%
	}
	.chat span{
		float:left;background:#F3F4F6;color:#333740;font-size:0.24rem;border-radius:0.2rem;padding:0.24rem;word-wrap:break-word;width:4rem;margin-left:0.15rem;
	}
	.chatp{
		text-align: right;
		background: #F3F4F6;
		font-size: 0.24rem;
		color: #333740;
		background: yellow!important;
	}
	.speak{
		width: 100%;
		height: 1rem;
		background: #FFFFFF;
		border-top: 1px solid #E0E2E7;
		display: flex;
		position: fixed;
		left: 0;
		bottom:0;
		justify-content: space-between;
	}
	.speak input{
		width: 5.42rem;
		height: 0.68rem;
		background: #F3F4F6;
		border-radius: 0.2rem;
		color: #9DA4B3;
		font-size: 0.28rem;
		outline: none;
		font-family: "PingFangSC-Regular";
		margin-top: 0.15rem;
		text-indent: 0.18rem;
	}
	.biao{
		width: 0.4rem;
		height: 0.4rem;
		margin-top: 0.25rem;
		margin-left: 0.3rem;
	}
	.send{
		width: 0.42rem;
		height: 0.42rem;
		margin-top: 0.25rem;
		margin-right: 0.3rem;
	}
	
	.message{
		width: 100%;
		height: 5.5rem;
		background: #F3F4F6;
		padding: 0.3rem 0.5rem 0.3rem 0.3rem;
		overflow-y: auto;
	}
	.message div{
		margin-bottom: 0.2rem;
	}
	.message span{
		color: #9DA4B3;
		font-size: 0.26rem;
		font-family: "PingFangSC-Medium";
	}
	
	
	.share{
		width: 100%;
		height: 1rem;
		background: #FB730A;
		text-align: center;
		font-size: 0.32rem;
		color: #FFFFFF;
		font-family: 'PingFangSC-Regular';
		line-height: 1rem;
		outline: none;
		border: none;
	}
</style>